<template>
  <div class="divContainerequip">
    <el-card class="box-card" :size="size" shadow="never">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="24">
            <div class="top">
              <div class="topDiv"><img class="image_3" referrerpolicy="no-referrer" :src="equipIcon"/></div>
              <span class="title-span">设备出入库</span>
              <!-- <span @click="clickHandler()"  class="equiptoptext" >近一个月</span>
              <span @click="clickHandler()"  class="equiptoptext">近一周</span>    -->
              <span style="float: right;">
                  <el-radio @change="clickHandler(1)" v-model="radio" label="1">近一周</el-radio>
                  <el-radio @change="clickHandler(2)" v-model="radio" label="2">近一个月</el-radio>
                 </span>

            </div>
          </el-col>

        </el-row>
      </div>
      <div id="equipmain" style="height:100%;width: 100%;"></div>
    </el-card>
  </div>
</template>

<script>
import {firstPage} from '@/api/firstPage.js'
import moment from "moment";

let echarts = require('echarts');

export default {
  name: "equip",


  data() {
    return {
      size: "",
      changeColor: false,
      radio: '1',
      type: 'week',
      rkList: [],
      ckList: [],
      dataTime: [],
      iFrameUrl: '',
      equipIcon: require('./images/wodezhangdan(1).png'),
      dialogProps: {
        visible: false,
        title: '设备入库',
        width: "90%",
        top: "5px",
      },
      time: '',//开始日期
      etime: '',//结束日期
    }
  },
  methods: {
    equipData() {
      this.ckList = []
      this.rkList = []
      this.dataTime = []
      let params = {
        type: this.type
      }
      firstPage.getCrkList(params).then(res => {
        res.data.ckList.forEach((item) => {
          this.ckList.push(item.crkNum)
        })
        res.data.rkList.forEach((item) => {
          this.rkList.push(item.crkNum)
          this.dataTime.push(item.crkTime.substring(5))
        })
        this.initChart();
      })
    },
    dateFormat(type) {
      if (type == 1) {
        let date = new Date()
        this.time = moment(date).format('YYYY-MM-DD')
        console.log(this.time)
        let edate = new Date(new Date().setHours(0, 0, 0, 0) - 3600 * 1000 * 24 * 7)//默认开始时间
        this.etime = moment(edate).format('YYYY-MM-DD')

      } else {
        let date = new Date()
        this.time = moment(date).format('YYYY-MM-DD')

        let edate = new Date(new Date().setHours(0, 0, 0, 0) - 3600 * 1000 * 24 * 30)//默认开始时间
        this.etime = moment(edate).format('YYYY-MM-DD')
      }
    },

    handleClose(done) {
      // this.$confirm("确认关闭？")
      // .then((_) => {

      this.dialogProps.visible = false;
      // })
      // .catch((_) => { });
    },
    //初始化Echarts
    initChart() {

      var chartDom = document.getElementById('equipmain');
      var myChart = echarts.init(chartDom);
      myChart.setOption({
        legend: {
          x: 'right',
          y: ' center',
          itemWidth: 25,
          itemHeight: 5,
          data: ['入库', '出库',]
        },
        grid: {
          top: '10%',
          left: '1%',
          bottom: '7%',
          right: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dataTime,
            axisLabel: {
              interval: 0 //设置间隔为0
            },

          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            nameLocation: 'end',
            nameTextStyle: {
              padding: [0, 0, -200, -10],
              fontSize: 12,
            },
            splitLine: {
              show: false
            },
            axisLine: {show: true},
          }
        ],

        dataZoom: [{
          start: 0,//默认为0
          end: 70,//默认为100
          type: 'inside',
          show: true,
          // xAxisIndex: [0],
          handleSize: 0,//滑动条的 左右2个滑动条的大小
          startValue: 0, // 初始显示值
          endValue: 20, // 结束显示值
          height: 15,//组件高度
          left: '0%', //左边的距离
          right: '10%',//右边的距离
          bottom: '3%',//底边的距离
          // borderColor: "#000",
          fillerColor: '#0e867f',
          borderRadius: 5,
          backgroundColor: '#eee',//两边未选中的滑动条区域的颜色
          showDataShadow: false,//是否显示数据阴影 默认auto
          showDetail: true,//即拖拽时候是否显示详细数值信息 默认true
          realtime: true, //是否实时更新
          filterMode: 'filter',
        },],

        series: [
          {
            name: '入库',
            type: 'bar',
            barGap: 0.2,
            barWidth: 20, // 柱子宽度
            itemStyle: {
              normal: {
                color: '#ffb31f',
                label: {
                  //  show: true, //开启显示
                  //  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            },
            data: this.rkList
          },
          {
            name: '出库',
            type: 'bar',
            barGap: 0.2,
            barWidth: 20, // 柱子宽度
            itemStyle: {
              normal: {
                color: '#0e867f',
                label: {
                  //  show: true, //开启显示
                  //  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            },
            data: this.ckList
          },
        ]
      });
      let that = this
      myChart.on('click', function (params) {
        if (params.seriesName == '入库') {
          that.rkEvent(params.name)
        } else if (params.seriesName == '出库') {
          that.ckEvent(params.name)
        }
      })

      window.onresize = myChart.resize
    },
    //查询数据
    clickHandler(val) {
      this.ckList = []
      this.rkList = []
      this.dataTime = []
      this.changeColor = !this.changeColor

      this.type = this.changeColor ? 'mouth' : 'week'
      this.equipData()
      this.dateFormat(val)//时间初始化
    }
  },
  mounted() {
    this.equipData()//获取数据
    this.dateFormat(1)//时间初始化
    //每1分钟取一次
    setInterval(() => {
      this.equipData()//获取数据
      this.dateFormat(1)//时间初始化
    }, 300000)

  },
}
</script>

<style scoped>
.divContainerequip {
  width: 100%;
  height: 100%;
  line-height: 35px;
}

.divContainerequip .el-card {
  border: 0px !important;
  border-radius: 0px;
  height: 100%;
}

.divContainerequip .el-card .el-card__header {
  padding: 0px 0px 0px 0px !important;
  border-bottom: none;
}

.divContainerequip .el-card .el-card__body {
  padding: 0;
  height: calc(100% - 35px);
}

.divContainerequip .top {
  /* border-bottom: 1px solid #eee; */
  border-bottom: 1px solid #eee;
  padding-left: 5px;
}

.title-font {
  color: var(--theme-color-09);
}

.title-span {
  font-weight: bold;
}

.equiptoptext {
  float: right;
  margin-left: 5px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
}

.colorChange {
  background-color: #f59a23;
  color: #fff;
}
</style>
